<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未来智慧综合能源管理系统-成本分析</title>
    <link rel="stylesheet" href="../js/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="../css/svg.css" type="text/css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/engineer.css">
    <link rel="stylesheet" href="../css/iconfonts/iconfont.css">
</head>
<body class="">
<div class="page" id="app">
    <div class="header">
        <div class="header-top">
            <a href="" class="logo icon iconfont icon-logo"></a>
            <div class="title">
                <p>智慧综合能源管理系统</p>
                <span>Smart Integrated Energy Management System</span>
            </div>
            <div class="user-options">
                <span class="user">Admin</span><span class="line">|</span><a href="javascript:void(0)">注销</a>
            </div>
            <div class="top-notice">
                <ul>
                    <li><a href="">1头部信息滚动头部信息滚动头部信息滚动头部信息滚动头部信息滚动1</a></li>
                    <li><a href="">2头部信息滚动头部信息滚动头部信息滚动头部信息滚动头部信息滚动12</a></li>
                    <li><a href="">3头部信息滚动头部信息滚动头部信息滚动头部信息滚动头部信息滚动13</a></li>
                </ul>
            </div>
            <div class="main-menu">
                <p class="date">2017年4月3日 星期一 15:30</p>
                <ul>
                    <li class="active"><a href=""><i class="icon iconfont icon-water"></i><span>水</span></a></li>
                    <li><a href=""><i class="icon iconfont icon-elec"></i><span>电</span></a></li>
                    <li><a href=""><i class="icon iconfont icon-gass"></i><span>气</span></a></li>
                    <li><a href=""><i class="icon iconfont icon-mei"></i><span>煤</span></a></li>
                    <li><a href=""><i class="icon iconfont icon-swz"></i><span>生物质</span></a></li>
                </ul>
            </div>
        </div>
        <div class="header-bottom">
            <a href="#" class="home"><i class="icon iconfont icon-home"></i></a>
            <div class="bread-thumb">
                <span>高级分析</span>
                <i class="icon iconfont icon-arroow"></i>
                <span>负荷分析</span>
            </div>
            <div class="rbg"></div>
            <div class="menu">
                <a href="javascript:void(0)" class="prev-menu-btn icon iconfont icon-btn-close"></a>
                <div class="menu-box">
                    <div class="menu-wrapper">
                        <ul class="menu-leave1">
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jbxx"></i><span>基本信息</span></a></li>
                            <li>
                                <a href="yngl.html"><i class="icon iconfont icon-yngl"></i><span>用能概览</span></a>
                            </li>
                            <li><a href=""><i class="icon iconfont icon-gjfx"></i><span>用能分析</span></a></li>
                            <li class="active"><a href="javascript:void(0)"><i class="icon iconfont icon-jfgl"></i><span>高级分析</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>节能管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>报表中心</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-bjgl"></i><span>报警管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jfgl"></i><span>计费管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-sbgl"></i><span>重点设备管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>企业用能管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>车间用能管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>工艺用能管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>产品用能管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>企业用能看板</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>用能维护</span></a></li>
                        </ul>
                    </div>
                    <div class="sub-menu">
                        <div class="inner">
                            <ul>
                                <li>
                                    <a href="Profile.html">企业简介</a>
                                    <span>|</span>
                                    <a href="Agency.html">能源机构管理</a>
                                    <span>|</span>
                                    <a href="System.html">能源管理制度</a>
                                    <span>|</span>
                                    <a href="Engineer.html">工程师资源</a>
                                    <span>|</span>
                                    <a href="Assets.html">计量器具管理</a>
                                    <span>|</span>
                                    <a href="nywlt.html">能源网络图</a>
                                    <span>|</span>
                                    <a href="nylxt.html">能源流向图</a>
                                </li>
                                <li></li>
                                <li>
                                    <a href="data-query.html">数据查询</a>
                                    <span>|</span>
                                    <a href="ynzj.html">用能足迹</a>
                                    <span>|</span>
                                    <a href="jbfx.html">基本分析</a>
                                    <span>|</span>
                                    <a href="index.html">对比分析</a>
                                    <span>|</span>
                                    <a href="pmtj.html">排名统计</a>
                                </li>
                                <li>
                                    <a href="cbfx.html">成本分析</a>
                                    <span>|</span>
                                    <a href="xsfx.html">损耗分析</a>
                                    <span>|</span>
                                    <a class="active" href="fhfx.html">负荷分析</a>
                                    <span>|</span>
                                    <a href="xlfx.html">需量分析</a>
                                    <span>|</span>
                                    <a class="active" href="hjfx.html">环境分析</a>
                                    <span>|</span>
                                    <a href="ycfx.html">预测分析</a>
                                </li>
                                <li>
                                    <a href="jzfx.html">基准分析</a>
                                    <span>|</span>
                                    <a href="ynpg.html">用能评估</a>
                                    <span>|</span>
                                    <a href="zbfx.html">指标分析</a>
                                </li>
                                <li>
                                    <a  href="Report.html">单点报表</a>
                                    <span>|</span>
                                    <a href="jxwbb.html">经信委报表</a>
                                </li>
                                <li>
                                    <a  href="txbj.html">通讯故障</a>
                                    <span>|</span>
                                    <a href="ycbj.html">异常数据</a>
                                    <span>|</span>
                                    <a href="qtbj.html">设备启停</a>
                                    <span>|</span>
                                    <a href="debj.html">超定额报警</a>
                                    <span>|</span>
                                    <a href="gybj.html">工艺控制报警（生产）</a>
                                    <a href="Report.html">单点报表</a>
                                </li>
                                <li>
                                    <a href="jfsz.html">计费设置</a>
                                    <span>|</span>
                                    <a href="dbkh.html">电表开户</a>
                                    <span>|</span>
                                    <a href="khgl.html">客户管理</a>
                                    <span>|</span>
                                    <a href="dyfy.html">当月费用</a>
                                    <span>|</span>
                                    <a href="lszd.html">历史账单</a>
                                </li>
                                <li>
                                    <a href="ssjk.html">实时监测</a>
                                    <span>|</span>
                                    <a href="sbynfx.html">设备用能分析</a>
                                    <span>|</span>
                                    <a href="sbclsr.html">设备产量输入（生产）</a>
                                    <span>|</span>
                                    <a href="sbdepz.html">设备定额配置（生产）</a>
                                    <span>|</span>
                                    <a href="sbnxdb.html">设备能效对标（生产）</a>
                                    <span>|</span>
                                    <a href="sbzhnxqs.html">设备综合能效趋势（生产）</a>
                                    <span>|</span>
                                    <a href="sbnhbb.html">设备能耗报表（生产）</a>
                                </li>
                                <li>
                                    <a href="qynhsj.html">企业能耗数据（生产）</a>
                                    <span>|</span>
                                    <a href="cpcltj.html">产品产量统计（生产）</a>
                                    <span>|</span>
                                    <a href="cpdhtj.html">产品单耗统计（生产）</a>
                                    <span>|</span>
                                    <a href="cpdhbb.html">产品单耗报表（生产）</a>
                                </li>
                                <li>
                                    <a href="cjdepz.html">车间定额配置（生产）</a>
                                    <span>|</span>
                                    <a href="cjnxdb.html">车间能效对标（生产）</a>
                                    <span>|</span>
                                    <a href="cjzhnhqs.html">车间综合能耗趋势（生产）</a>
                                    <span>|</span>
                                    <a href="cjnhbb.html">车间能耗报表（生产）</a>
                                </li>
                                <li>
                                    <a href="gyjbxx.html">工艺基本信息（生产）</a>
                                    <span>|</span>
                                    <a href="gyclsr.html">工艺产量输入（生产）</a>
                                    <span>|</span>
                                    <a href="gydepz.html">工艺定额配置（生产）</a>
                                    <span>|</span>
                                    <a href="gynxdb.html">工艺能效对标（生产）</a>
                                    <span>|</span>
                                    <a href="gynhbb.html">工艺能耗报表（生产）</a>
                                </li>
                                <li>
                                    <a href="cpdepz.html">产品定额配置（生产）</a>
                                    <span>|</span>
                                    <a href="cpnxdb.html">产品能效对标（生产）</a>
                                    <span>|</span>
                                    <a href="cpzhnhqs.html">产品综合能耗趋势（生产）</a>
                                    <span>|</span>
                                    <a href="cpnhbb.html">产品能耗报表（生产）</a>
                                </li>
                                <li>
                                    <a href="qykb.html">企业看板（生产）</a>
                                    <span>|</span>
                                    <a href="cjkb.html">车间看板（生产）</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <a href="javascript:void(0)" class="next-menu-btn icon iconfont icon-btn-open"></a>

            </div>
            <div class="lbg"></div>
        </div>
    </div>
    <div class="filter-panel flex-box ">
        <p class="tit">基本参数</p>
        <div class="filter-wrapper">
            <span>起止时间</span>
            <div class="search-item"><input type="text" style="width:80px;" class="from"
                                            onfocus="showDatePicker(this,1)" v-model="startDate"
                                            @blur="setViewModel('startDate')"></div>
            <span>至</span>
            <div class="search-item"><input class="to" style="width:80px" v-model="endDate"
                                            onfocus="showDatePicker(this,2)" @blur="setViewModel('endDate')"
                                            type="text">
            </div>
            <span style="margin-left: 10px;">分析通道</span>
            <div class="select-modal">
                <span>有功功率</span>
                <ul>
                    <li @click="dataType=1"><a href="javascript:void(0)">有功功率</a></li>
                    <li @click="dataType=2"><a href="javascript:void(0)">电能量</a></li>
                </ul>
            </div>
            <span style="margin-left: 10px;">容量</span>
            <div class="search-item"><input v-model="volume" type="text"></div>
            <span class="search-btn" @click="search">查询</span>
            <a href="" title="导出"></a>
        </div>
    </div>
    <div class="content" style="top:208px;bottom: 10px;">
        <div class="extend">
            <div class="zTreeDemoBackground left">
                <div class="search-box">
                    <input type="text" class="search-ipt" ref="ztreesearch">
                    <input type="button" value="搜索" class="search-btn" @click="searchNode">
                </div>
                <ul id="treeDemo" class="ztree"></ul>
                <!--<ul id="code" class="log" style="height:20px;"></ul>-->
                <svg v-show="ztreeLoadingFlag" id="ztree-loading" viewBox="0 0 120 120" version="1.1"
                     xmlns="http://www.w3.org/2000/svg"
                     xmlns:xlink="http://www.w3.org/1999/xlink">
                    <g id="circle" class="g-circles g-circles--v1">
                        <circle id="12" transform="translate(35, 16.698730) rotate(-30) translate(-35, -16.698730) "
                                cx="35"
                                cy="16.6987298" r="10"></circle>
                        <circle id="11" transform="translate(16.698730, 35) rotate(-60) translate(-16.698730, -35) "
                                cx="16.6987298" cy="35" r="10"></circle>
                        <circle id="10" transform="translate(10, 60) rotate(-90) translate(-10, -60) " cx="10" cy="60"
                                r="10"></circle>
                        <circle id="9" transform="translate(16.698730, 85) rotate(-120) translate(-16.698730, -85) "
                                cx="16.6987298" cy="85" r="10"></circle>
                        <circle id="8" transform="translate(35, 103.301270) rotate(-150) translate(-35, -103.301270) "
                                cx="35" cy="103.30127" r="10"></circle>
                        <circle id="7" cx="60" cy="110" r="10"></circle>
                        <circle id="6" transform="translate(85, 103.301270) rotate(-30) translate(-85, -103.301270) "
                                cx="85" cy="103.30127" r="10"></circle>
                        <circle id="5" transform="translate(103.301270, 85) rotate(-60) translate(-103.301270, -85) "
                                cx="103.30127" cy="85" r="10"></circle>
                        <circle id="4" transform="translate(110, 60) rotate(-90) translate(-110, -60) " cx="110" cy="60"
                                r="10"></circle>
                        <circle id="3" transform="translate(103.301270, 35) rotate(-120) translate(-103.301270, -35) "
                                cx="103.30127" cy="35" r="10"></circle>
                        <circle id="2" transform="translate(85, 16.698730) rotate(-150) translate(-85, -16.698730) "
                                cx="85"
                                cy="16.6987298" r="10"></circle>
                        <circle id="1" cx="60" cy="10" r="10"></circle>
                    </g>

                    <use xlink:href="#circle" class="use"/>
                </svg>

            </div>
            <ul style="display: none;">
                <li><p>父子关联关系：<br/>
                    被勾选时：<input type="checkbox" id="py" class="checkbox first" checked/><span>关联父</span>
                    <input type="checkbox" id="sy" class="checkbox first" checked/><span>关联子</span><br/>
                    取消勾选时：<input type="checkbox" id="pn" class="checkbox first" checked/><span>关联父</span>
                    <input type="checkbox" id="sn" class="checkbox first" checked/><span>关联子</span><br/>
                    <ul id="code" class="log" style="height:20px;"></ul>
                    </p>
                </li>
            </ul>
            <div class="extend-btn"><i class="icon iconfont icon-btn-open"></i></div>
        </div>
        <div class="ynzj">
            <div class="fhfx-top-wrapper">
                <div class="flex-box">
                    <div class="byq" style="width: 140px; background: rgba(0, 0, 0, 0.3);">
                        <img src="../images/iconTransformer.svg" alt="" width="60" height="60">
                        <span>变压器总容量</span>
                        <p v-text="data.TotalVolume"></p>
                        <span>KVA</span>
                    </div>
                    <div class="flex min-max-wrapper" >
                        <div class="left">
                            <p class="title">最小值发生 <span style="color:#00fff0;" v-text="data.Min.Label"></span></p>
                            <div class="min-max min">
                                <div class="min-max-left" style="display: inline-block;">
                                    <img src="../images/iconMinPower.svg" width="60" height="60" alt="">
                                    <p style="color: #00FF99;font-size: 18px;" v-text="data.Min.Value"></p>
                                    <span>KW</span>
                                </div>
                                <div class="min-max-right" style="display: inline-block;">
                                    <svg clip="ynzj"  width="100" height="122" viewbox="0 0 100 122" :data-precent="12.3" class="svg">
                                        <circle cx="50%" cy="40" r="24" stroke-width="5" stroke="#00242b" fill="none">
                                        </circle>
                                        <circle cx="50%" cy="50" r="28" stroke-width="2" stroke-linecap="round" stroke="#00FF00" fill="none" transform="matrix(0,-1,1,0,0,90)" stroke-dasharray="0 1069"></circle>
                                        <text x="50%" y="45" fill="#00FF00" text-anchor="middle" font-size="14">80%</text>
                                        <text x="50%" y="110" fill="#008078" text-anchor="middle" font-size="12">当日变压器使用率       </text>
                                    </svg>
                                </div>
                            </div>
                        </div>
                        <div class="right">
                            <table class="table" width="300">
                                <tbody>
                                    <tr>
                                        <td><p>采集点</p></td>
                                        <td><p>值</p></td>
                                        <td><p>占比</p></td>
                                    </tr>
                                    <tr v-for="(item,$index) in data.Min.Detail">
                                        <td><p v-text="item.Label"></p></td>
                                        <td><p v-text="item.Data1"></p></td>
                                        <td><p v-text="item.Value"></p></td>
                                    </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="flex min-max-wrapper" >
                        <div class="left">
                            <p class="title">最小值发生 <span style="color:#00fff0;" v-text="data.Max.Label"></span></p>
                            <div class="min-max min">
                                <div class="min-max-left" style="display: inline-block;">
                                    <img src="../images/iconMaxPower.svg" width="60" height="60" alt="">
                                    <p style="color: #00FF99;font-size: 18px;" v-text="data.Max.Value"></p>
                                    <span>KW</span>
                                </div>
                                <div class="min-max-right" style="display: inline-block;">
                                    <svg clip="ynzj"  width="100" height="122" viewbox="0 0 100 122" :data-precent="12.3" class="svg">
                                        <circle cx="50%" cy="40" r="24" stroke-width="5" stroke="#00242b" fill="none">
                                        </circle>
                                        <circle cx="50%" cy="50" r="28" stroke-width="2" stroke-linecap="round" stroke="#FF6400" fill="none" transform="matrix(0,-1,1,0,0,90)" stroke-dasharray="0 1069"></circle>
                                        <text x="50%" y="45" fill="#FF6400" text-anchor="middle" font-size="14">80%</text>
                                        <text x="50%" y="110" fill="#008078" text-anchor="middle" font-size="12">当日变压器使用率</text>
                                    </svg>
                                </div>
                            </div>
                        </div>
                        <div class="right">
                            <table class="table" width="280">
                                <tbody>
                                <tr>
                                    <td><p>采集点</p></td>
                                    <td><p>值</p></td>
                                    <td><p>占比</p></td>
                                </tr>
                                <tr v-for="(item,$index) in data.Max.Detail">
                                    <td><p v-text="item.Label"></p></td>
                                    <td><p v-text="item.Data1"></p></td>
                                    <td><p v-text="item.Value"></p></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item" style="margin-top: 20px;">
                <div class="item-bd">
                    <div class="min-max-detail" id="min-detail"></div>
                </div>
            </div>
            <div class="item" style="margin-top: 20px;">
                <div class="item-bd">
                    <div class="min-max-detail" id="max-detail"></div>

                </div>
            </div>
        </div>
    </div>
    <div class="loading" style="display: none;" v-show="loadingFlag">
        <div class="svg-loading">
            <svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 xmlns:xlink="http://www.w3.org/1999/xlink">
                <g id="circle" class="g-circles g-circles--v1">
                    <circle id="12" transform="translate(35, 16.698730) rotate(-30) translate(-35, -16.698730) " cx="35"
                            cy="16.6987298" r="10"></circle>
                    <circle id="11" transform="translate(16.698730, 35) rotate(-60) translate(-16.698730, -35) "
                            cx="16.6987298" cy="35" r="10"></circle>
                    <circle id="10" transform="translate(10, 60) rotate(-90) translate(-10, -60) " cx="10" cy="60"
                            r="10"></circle>
                    <circle id="9" transform="translate(16.698730, 85) rotate(-120) translate(-16.698730, -85) "
                            cx="16.6987298" cy="85" r="10"></circle>
                    <circle id="8" transform="translate(35, 103.301270) rotate(-150) translate(-35, -103.301270) "
                            cx="35" cy="103.30127" r="10"></circle>
                    <circle id="7" cx="60" cy="110" r="10"></circle>
                    <circle id="6" transform="translate(85, 103.301270) rotate(-30) translate(-85, -103.301270) "
                            cx="85" cy="103.30127" r="10"></circle>
                    <circle id="5" transform="translate(103.301270, 85) rotate(-60) translate(-103.301270, -85) "
                            cx="103.30127" cy="85" r="10"></circle>
                    <circle id="4" transform="translate(110, 60) rotate(-90) translate(-110, -60) " cx="110" cy="60"
                            r="10"></circle>
                    <circle id="3" transform="translate(103.301270, 35) rotate(-120) translate(-103.301270, -35) "
                            cx="103.30127" cy="35" r="10"></circle>
                    <circle id="2" transform="translate(85, 16.698730) rotate(-150) translate(-85, -16.698730) " cx="85"
                            cy="16.6987298" r="10"></circle>
                    <circle id="1" cx="60" cy="10" r="10"></circle>
                </g>

                <use xlink:href="#circle" class="use"/>
            </svg>

        </div>
    </div>
</div>
</body>
<script src="../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/zTree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../js/zTree/js/jquery.ztree.excheck.js"></script>
<script src="../js/My97DatePicker/WdatePicker.js"></script>
<script src="../js/echarts.min.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/fhfx.js"></script>
<script src="../js/common.js"></script>
</html>